<template>
	<view>

		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>

		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left"></view>
				<view class="kaoshi-head-m">考试</view>
			</view>
		</view>


		<view class="evertop">


			<navigator url="/pagesa/citys/citys"
				style="display: flex;align-items: center;justify-content: center;margin-left: 20rpx;">
				<image src="http://shuati26.kptedu.com/uploads/image/address.png" style="width: 25px;height: 25px;">
				</image>
				<text style="margin: 10rpx;" v-if="cityName">{{cityName}}</text>
				<text v-else>切换省份</text>
				<image src="../../static/img/add-icon.png" style="width: 30rpx;height: 30rpx;"></image>

			</navigator>


			<view class="top-nav">
				距2023年{{cityName}}专升本考试
				<text>{{diff_days}}</text>天
			</view>
		</view>
		<view class="big-image">
			<image src="http://shuati26.kptedu.com/uploads/image/moni.png"
				style="border-radius: 20rpx;width: 100%;margin: auto;height: 110px;margin-top: 20rpx;"
				@tap="$openrul('/pages/examination/examinationList/index?from_type=2&type=2&subject_id='+subject_id)">
			</image>
		</view>
		<view class="kaoshi-head-nav">
			<!-- <view class="kaoshi-head-nav-flex" @tap="$openrul('/pagesa/my/recording/index?from_type=2&subject_id='+subject_id)">
				<image src="../../static/img/xuexijilu.png" class="kaoshi-head-nav-img"></image>
				<view>考试错题</view>
			</view> -->
			<view class="kaoshi-head-nav-flex"
				@tap="$openrul('/pages/examination/examrecord/examrecord?from_type=2&subject_id='+subject_id)">
				<image src="../../static/img/xuexijilu.png" class="kaoshi-head-nav-img"></image>
				<view class="btnText">考试记录</view>
			</view>
			<view class="kaoshi-head-nav-flex" @click="goto_system_class()">
				<image src="../../static/img/jieduanceping.png" class="kaoshi-head-nav-img"></image>
				<view class="btnText">阶段测评</view>
			</view>
			<view class="kaoshi-head-nav-flex"
				@tap="navTo('/pages/examination/examinationList/index?type=1&currentId='+currentId+'&subject_id='+subject_id)">
				<image src="../../static/img/kaoshizhenti.png" class="kaoshi-head-nav-img"></image>
				<view class="btnText">考试真题</view>
			</view>
		</view>
		<view style="width: 100%;height: 40px;"></view>
		<tui-tabs :tabs="tabs" :currentTab="currentTab" itemWidth="50%" @change="tabschange" size='12'></tui-tabs>

		<u-empty v-if="kslist==''" mode="list" icon="https://shuati26.kptedu.com/uploads/image/wushuati.png"
			text="您的刷题记录为空,快去刷题吧" textColor="#000" width="460rpx" height="420rpx">
			<view v-if="list==''" class="empty_btn"
				@tap="$openrul('/pagesa/questionBank/questionBankList/index?from_type=1&subject_id='+subject_id)">
				开始刷题
			</view>
		</u-empty>

		<view v-else-if="currentTab==0" class="exam-tabs-list" v-for="(item,index) in list" :key="index">
			<view class="exam-tabs-list-title">
				{{item.exam_name}}
			</view>
			<view class="exam-tabs-list-bom">
				<view>
					考试成绩:&nbsp;&nbsp;{{item.score}}分
				</view>
				<view style="display: flex;flex-flow: row nowrap;color: orange;" @click.stop="gojl(item)">
					<u-icon name="file-text-fill" color="orange"></u-icon>
					记录
				</view>

			</view>
		</view>


		<view v-else class="exam-tabs-list" v-for="(item,index) in kslist" :key="index">
			<view class="exam-tabs-list-title">
				【{{item.subject_name}}】{{item.exam_name}}
			</view>
			<view class="exam-tabs-list-bom">
				<view>
					考试成绩:{{item.score}}分
				</view>
				<view style="display: flex;flex-flow: row nowrap;color: orange;" @click.stop="gojl(item)">
					<u-icon name="file-text-fill" color="orange"></u-icon>
					记录
				</view>

			</view>
		</view>
	</view>

	</view>
</template>
<script>
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs"
	import {
		mapState
	} from 'vuex';
	import Error from '@/core/untils/error/index';
	import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue";
	export default {
		components: {
			//Kaoshihead,
			//Truetopic,
			uniNoticeBar,
			tuiTabs
		},
		data() {
			return {

				cityName: '',
				list: [], //错题数组

				showModal: false,
				current_exam: [],
				currentId: 0,
				title: '',
				kemuList: [],
				chooseShow: false,
				subject_id: "",
				tabs: [{
					name: "考试记录"
				}, {
					name: "真题记录"
				}, {
					name: "测评记录"
				}],
				currentTab: 0,
				right_num: '', //错题成绩
				kslist: [], //后三种切换数组
				//kstotal:'',//后三种切换成绩
				diff_days: '',
			};
		},
		onLoad(opts) {
			if (uni.getStorageSync('choose_cityName')) {
				this.cityName = uni.getStorageSync('choose_cityName')
			}
			this.diff_days = uni.getStorageSync('diff_days'),
				//this.setting(); 
				// #ifdef MP-WEIXIN
				wx.showShareMenu({
					withShareTicket: true
				})
			// #endif

		},
		onPullDownRefresh() {
			console.log('refresh');
		},
		onShow() {
			if (uni.getStorageSync('choose_cityName')) {
				this.cityName = uni.getStorageSync('choose_cityName')
				this.diff_days = uni.getStorageSync('diff_days')
			}
			if (this.userinfo.token) {
				this.get_exam_error_list();
			}
			this.get_exam_error_list()
			this.get_record()
			//console.log(this.cityName+"this.cityName")

		},

		computed: {
			...mapState(['subject', 'userinfo']),
			static_media() {
				return {
					img01: this.$myConfig.localMedia + 'http://shuati26.kptedu.com/uploads/image/kaoshi-icon1.png',
					img02: this.$myConfig.localMedia + 'http://shuati26.kptedu.com/uploads/image/kaoshi-icon2.png',
					img03: this.$myConfig.localMedia + 'http://shuati26.kptedu.com/uploads/image/kaoshi-icon3.png',
					img04: this.$myConfig.localMedia + 'http://shuati26.kptedu.com/uploads/image/kaoshi-icon4.png'
				};
			},
		},

		methods: {

			async goUrl(url) {
				uni.navigateTo({
					url: '/pagesa/my/vip/webview?url=' + url
				})
			},


			isShowModal: function() {
				this.showModal = !this.showModal
			},

			//跳转前需要登录
			navTo(url) {
				if (this.$myUserLogin.getToken()) {
					this.$openrul(url)
				} else {
					Error.errorNotLoggedIn();
				}
			},
			//点击考试项目，弹窗显示相关信息
			choice_exam(item) {
				if (item.is_allow == 1 && item.is_can == 1) {
					this.current_exam = item
					this.$nextTick(() => {
						this.isShowModal()
					})
				} else if (item.is_allow == 1 && item.is_can == 0) {
					var that = this
					uni.showModal({
						title: '温馨提示',
						content: '该试卷为会员专享，若想答题请点击确定按钮成为会员或联系客服获取激活码激活呦~',
						success: function(res) {
							if (res.confirm) {


							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else if (item.is_allow == 0) {
					uni.showToast({
						icon: 'none',
						title: '您已参加过本场考试，不能重复考试'
					})
					return;
				}
			},


			// 考试开始，向后台发送开始考试的考试id，返回当前考试结束时间
			async examBegin(item) {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.exam_begin,
					data: {
						exam_id: item.id
					},
					needLogin: true
				});
				if (res.code == 1) {
					let end_time = res.data.endtime
					this.goto_detail(item, end_time)
				}
			},

			// 错题
			async get_exam_error_list() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.exam_error_list,
					data: {
						province: this.cityName,
						subject_id: 0,
					},
					needLogin: true
				})
				if (res.code == 1) {

					this.list = res.data.data

					//console.log(JSON.stringify(this.list)+"this.list")
				}
			},
			tabschange(e) {
				this.currentTab = e.index

				if (this.currentTab == 0) {
					this.type = 2
				} else if (this.currentTab == 2) {
					this.type = 3
				} else if (this.currentTab == 1) {
					this.type = 1
				}
				this.get_record()
			},
			async get_record() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.record,
					data: {
						province: uni.getStorageSync('choose_cityName'),
						type: this.type,
						page: 1,
						limit: 4,
					},
					needLogin: true
				})
				if (res.code == 1) {
					this.kslist = res.data.list

				}
			},

			goto_detail(item, end_time) {
				this.showModal = !this.showModal
				this.$openrul('/pages/examination/examinationList/detail?id=' + item.id + '&from_type=' + item.type +
					'&exam_name=' + item.exam_name + '&title=' + item.type_text + '&end_time=' + end_time)
			},

			gojl(item) {
				this.$openrul('/pages/examination/examOver/indexf/indexf?id=' + item.id + '&from_type=' + item.type +
					'&exam_name=' + item.exam_name + '&title=' + item.type_text)
			},


		}
	};
</script>
<style>
	page {
		background-image: linear-gradient(to top, #f8f8f8, #ffffff);

	}

	.evertop {
		padding: 26rpx 10rpx;
	}

	.select_title {
		display: flex;
		font-size: 34rpx;
		line-height: 100rpx;

	}

	.select_title_absolute {
		position: absolute;
		z-index: 999;
		width: 100%;
		background: #fff
	}

	.select_title_absolute>view {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #f5f5f5;
		font-size: 28rpx;
		color: #333;
		width: 93%;
		margin: 0 auto;
	}

	.select_title_right {
		margin-left: 20rpx;
		font-weight: 600
	}

	.select_title_right image {
		position: relative;
		top: 6rpx;
		left: 10rpx
	}

	.kaoshi-head-nav {
		display: flex;
		justify-content: space-around;
		text-align: center;
		font-size: 23rpx;
		font-weight: 900;
		color: #000;
		z-index: 10000;
		padding: 0 20rpx;

	}

	.kaoshi-head-nav .kaoshi-head-nav-flex {
		display: flex;
		align-items: center;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		height: 100rpx;
		justify-content: center;
		width: 220rpx;


	}

	.btnText {
		font-size: 14px
	}

	.kaoshi-head-nav-img {
		width: 20px;
		height: 20px;
		margin-right: 10rpx;
	}


	.kaoshi-tiku-title {
		width: 92%;
		margin: 0 auto;
		padding: 12px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kaoshi-tiku-title-l {
		display: flex;
		font-weight: bold;
		font-size: 17px;
	}

	.kaoshi-tiku-title-r {
		color: #000;
		border: solid 1px #d8d8d8;
		padding: 5px 13px;
		border-radius: 35px;
		font-size: 12px;
	}

	.kaoshi-tiku {
		background: #fff;
		width: 93%;
		margin: 0 auto 8px;
		border-radius: 6px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
	}

	.kaoshi-tiku-content {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 14px;
		padding: 10px 0;
		border-bottom: solid 1px #f5f5f5;
	}

	.kaoshi-tiku-content .icon-arrow {
		padding-left: 13px;
		color: #b3b3b3;
	}

	.kaoshi-tiku-content-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: inherit;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
		padding-bottom: 6px;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content:last-child {
		font-size: 14px;
	}

	.kaoshi-tiku .kaoshi-tiku-content:last-child {
		border-bottom: none;
	}

	.icon-shijian1 {
		color: #3c7bfc;
		font-size: 18px;
		padding-right: 2px;
	}

	.kaoshi-tiku-content-top {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 16px;
	}

	.kaoshi-tiku-content-top img {
		width: 20px;
		height: 22px;
		margin-right: 10px;
	}

	.kaoshi-tiku-content-bottom {
		font-size: 13px;
		display: flex;
		align-items: center;
	}

	/*弹窗*/
	.tan-mask {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.tan-modal {
		position: fixed;
		z-index: 999;
		width: 80%;
		max-width: 300px;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #fff;
		text-align: center;
		border-radius: 3px;
		overflow: hidden;
	}

	.tan-title {
		padding: 15px 0;
		border-bottom: solid 1px #f4f4f4;
	}

	.tan-title view {
		font-weight: 400;
		font-size: 17px;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.tan-content {
		width: 90%;
		margin: 0 auto;
		font-size: 14px;
	}

	.exam-tan-content-flex {
		display: flex;
		width: 91%;
		margin: 0 auto;
		padding: 13px 0;
		border-bottom: solid 1px #f4f4f4;
	}

	.exam-tan-content-flex span {
		color: #767676;
		width: 42%;
		text-align: left;
	}

	.exam-tan-button {
		background: #3c7bfc;
		color: #fff;
		padding: 10px;
		margin: 15px 0;
		border-radius: 4px;
		font-size: 16px;
		display: block !important;
	}

	.exam-tabs-list {
		display: flex;
		flex-flow: column wrap;
		width: 92%;
		height: 150rpx;
		border-bottom: 1px #EFEFEF solid;
		margin: auto;

	}

	.exam-tabs-list-title {
		font-size: 30rpx;


		margin-top: 20rpx;
	}

	.exam-tabs-list-bom {
		font-size: 23rpx;
		display: flex;
		align-items: center;
		flex-flow: row nowrap;
		margin-top: 30rpx;
		margin-left: 10rpx;

	}

	.exam-tabs-list-bom>view:nth-child(1) {
		color: #9C9C9C;

	}

	.exam-tabs-list-bom>view:nth-child(2) {
		display: flex;
		flex-flow: row nowrap;
		color: darkgray;
		margin-left: 50rpx;

		align-items: center;
	}

	.empty_btn {
		background-color: #f1f5fe;
		color: #65c4e2;
		border-radius: 20rpx;
		font-size: 20rpx;
		padding: 7rpx 20rpx;
		margin-top: 30rpx;
	}
</style>
